<template>
  <view class="container">
    <view class="header">
      <text class="title">欢迎使用uni-app</text>
    </view>
    <view class="content">
      <text class="desc">这是一个基于Vue 2 + TypeScript + Pinia的uni-app项目</text>
      <button class="btn" @click="handleClick">点击示例</button>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import { useCounterStore } from '@/store'

export default Vue.extend({
  name: 'HomePage',
  methods: {
    handleClick() {
      const counter = useCounterStore()
      counter.increment()
      uni.showToast({
        title: `点击次数: ${counter.count}`,
        icon: 'none'
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.btn {
  background-color: #007aff;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
}
</style>